<template>
	<view class="de_cantent">
		<!-- LOGO -->
		<view class="de_size">
			<!-- LOGO图标 -->
			<view class="de_logo" @click="handeleLogo">
				<image :src="setImage(detailData.user.avatar)"
					style="width: 96rpx;height: 96rpx;border-radius: 16rpx;" />
				<!-- <image :src="IMGURL+detailData.user.avatar" style="width: 96rpx;height: 96rpx;border-radius: 16rpx;" /> -->
			</view>
			<view class="de_evaluate">
				<view class="de_evaluate_title">{{lang==='zh'?detailData.user.username:detailData.user.username_ru}}
				</view>
				<view class="de_evaluate_block">
					<view class="de_evaluate_block_left">
						<image v-if="detailData.country==0" :src="HTTP_IMG_UTL+'zone_001681@4x.png'"
							style="width: 30rpx;height: 22rpx;" />
						<image v-if="detailData.country==1" :src="HTTP_IMG_UTL+'zone_002680@4x.png'"
							style="width: 30rpx;height: 22rpx;" />
					</view>

					<view class="de_Comprehensive_evaluation">
						<view style="position: relative;margin-bottom: -9rpx;">
							<image :src="HTTP_IMG_UTL+'pingjia123_138@4x.png'"
								style="width: 392rpx;height: 44rpx;margin-bottom: -2rpx;margin-right: -2rpx;" />
							<view class="de_Comprehensive_title">
								<view style="margin-left: 58rpx;">{{$t('综合评价')}} :</view>
								<view style="margin-left: 10rpx;">
									<image v-for="(item,index) in 5" :key="index"
										:src="HTTP_IMG_UTL+'xingxing@4x.png'"
										style="width: 28rpx;height: 28rpx;margin-top: 8rpx;margin-left: 5rpx;" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>




		<!-- 商品名称|发货地|单价|单间重量|单件体积 -->

		<view class="de_detail_1">
			<view style="margin-top: 10rpx;">
				<!-- 图 -->
				<view class="my_images" v-if="isShow">
					<image :src="IMGURL+detailData.logo" mode=""
						style="width: 100%;height: 748rpx;border-radius: 16rpx;"></image>
				</view>
				<!-- 视频 -->
				<view style="width: 100%;position: relative;z-index: 1;top: 0;height: 748rpx;background-color: #F6F6F6;
					" v-if="!isShow">
					<video id="myVideo" :initial-time="0" autoplay="true" loop="true"
						style="width: 100%;z-index: 1; margin-left: 0%; height: 748rpx;position: relative;top: 0;"
						@fullscreenchange="fullscreenchange" @click="playVideo" :controls="true" :show-progress="true"
						:show-play-btn="true" :enable-play-gesture="true" object-fit="fill"
						:src="IMGURL+detailData.buy_videos"
						:poster="IMGURL+detailData.buy_videos + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'"
						objectFit="container">

						<cover-view
							style="position: absolute;top: 624rpx;left:165rpx;display: flex;height: 80rpx;align-items: center;width: 300rpx;z-index: 2;">
							<cover-view @click="handeleQitem(index)" v-for="(item,index) in QList" :key="index"
								:class="index===QIndex?'qitems_active':'qitems'">{{$t(item)}}</cover-view>
						</cover-view>
					</video>
				</view>
				<!-- 图片 -->
				<cover-view v-if="isShow && detailData.buy_videos.length>0"
					style="position: absolute;top: 634rpx;left:185rpx;display: flex;height: 80rpx;align-items: center;width: 300rpx;z-index: 100;">
					<cover-view @click="handeleQitem(index)" v-for="(item,index) in QList" :key="index"
						:class="index===QIndex?'qitems_active':'qitems'">{{$t(item)}}</cover-view>
				</cover-view>
			</view>

			<!-- <view class="de_detail_title_new"> -->
				<view class="de_title_block_title">
					{{lang==='zh'?detailData.name:detailData.name_ru}}
				</view>
				<view>
					<u-tag v-if="detailData.brand" :text="lang==='zh'?detailData.brand:detailData.brand_ru" bg-color="#54D441" color="#FFFFFF"  size="mini"/>
				</view>
				<view style="width: 100%;height: 96rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
					<view style="font-size: 26rpx;">{{$t('货物到达地')}}</view>
					<view style="font-size: 20rpx;">{{$t(detailData.shd)}}</view>
				</view>
				<view style="width: 100%;height: 96rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
					<view style="font-size: 26rpx;">{{$t('期望单价')}}</view>
					<view style="font-size: 20rpx;">
					{{detailData.desire_price!==''?detailData.desire_price:$t('等待报价')}}
					{{detailData.desire_price!==''?$t(detailData.price_unit):''}}
					<!-- {{lang==='zh'?detailData.number_unit:detailData.number_unit_ru}} -->
				</view>
			</view>
			<view
				style="width: 100%;height: 96rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('大概总重量')}}</view>
				<view style="font-size: 20rpx;">{{lang==='zh'?detailData.goods_weight:detailData.goods_weight_ru}} kg
				</view>
			</view>
			<view
				style="width: 100%;height: 96rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('大概总体积')}}</view>
				<view style="font-size: 20rpx;">{{lang==='zh'?detailData.goods_volume:detailData.goods_volume_ru}} m³
				</view>
			</view>
			<view v-if="isParameter" class="de_detail_title_1"
				v-for="(item,index) in lang==='zh'?detailData.parameter:detailData.parameter_ru">
				<view style="margin-left: 8rpx;">{{item.key}}</view>
				<view style="margin-right: 8rpx;">{{item.value}}</view>
			</view>
			<view @click="isParameter = !isParameter" v-if="detailData.parameter"
				style="width: 100%;height: 65rpx;display: flex;align-items: center;justify-content: center;font-size: 24rpx;">
				<view>{{isParameter?$t('收起'):$t('查看更多')}}</view>
				<view style="margin-left: 8rpx;" :class="!isParameter?'trianglex':'triangles'"></view>
			</view>
			<!-- </view> -->
		</view>
		<!-- 商品详情 -->
		<view class="de_tedail1">
			<view style="width: 100%;height: 48rpx;display: flex;align-items: center;">
				<view style="margin-left: 8rpx;font-size: 32rpx;font-weight: 600;">{{$t('详细信息')}}</view>
			</view>
			<view
				style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('需求数量')}}</view>
				<view style="font-size: 20rpx;">
					{{lang==='zh'?detailData.goods_num:detailData.goods_num_ru}}
					{{lang==='zh'?detailData.number_unit:detailData.number_unit_ru}}
				</view>
			</view>
			<view
				style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('期望生产时间')}}</view>
				<view style="font-size: 20rpx;">{{detailData.desire_speed}} {{$t(detailData.speed_unit)}}</view>
			</view>
			<view
				style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('是否含运费')}}</view>
				<view style="font-size: 20rpx;">{{detailData.pay_type==0?$('含'):$t('不含')}}</view>
			</view>
			<view
				style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;"
				v-if="detailData.pay_type==0">
				<view style="font-size: 26rpx;">{{$t('期望运输速度')}}</view>

				<view style="font-size: 20rpx;">{{detailData.express_speed?detailData.express_speed:'-'}}{{detailData.express_speed?$t(detailData.speed_unit):''}}</view>
			</view>
			<view
				style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('付款方式')}}</view>
				<view style="font-size: 20rpx;">{{detailData.pay_type==='1'?$t('预付全款'):$t('预付定金')}}</view>
			</view>
			<!-- <view style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('是否推广置顶')}}</view>
				<view style="font-size: 20rpx;">{{detailData.is_topping==1?$t('否'):$t('是')}}</view>
			</view> -->
			<view
				style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;">{{$t('是否缴纳保证金')}}</view>
				<view style="font-size: 20rpx;">{{detailData.is_margin==1?$t('否'):$t('是')}}</view>
			</view>
			<view v-if="detailData.is_margin==2"
				style="width: 100%;height: 98rpx;display: flex;flex-direction: column;justify-content: space-evenly;border-bottom: 1rpx solid #D8D8D8;">
				<view style="font-size: 26rpx;color: #FF0000;">{{$t('保证金金额')}}</view>
				<view style="font-size: 20rpx;color: #FF0000;">{{detailData.margin_price}}
					{{$t(lang==='zh'?detailData.price_unit:detailData.price_unit_ru)}}</view>
			</view>
		</view>



		<!-- 详情图片 -->
		<view class="de_detail_images">
			<view class="de_detail_images_title">
				<view class="de_line"></view>
				<view class="googs_images">{{$t('商品详情图片')}}</view>
			</view>
			<view style="width: 612rpx;min-height: 71rpx;padding: 12rpx 46rpx 11rpx 46rpx;font-size: 22rpx;background-color: #F5F4F9;border-radius: 8rpx;margin-bottom: 37rpx;text-align: center;">
				{{lang==='zh'?detailData.content:detailData.content_ru}}
			</view>
			
			<view class="de_detail_images_1">
				<view v-for="(item,index) in detailData.buy_images" :key="index">
					<u-image :src="im+item" width='612rpx' height="675rpx">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
			</view>
		</view>
		<!-- 文件可下载 -->
		<view v-if="detailData.buy_files.length > 0"
			style="width: 690rpx;min-height: 166rpx;display: flex;flex-direction: column;padding: 16rpx;background-color: #FFFFFF;border-radius: 16rpx;margin-top: 16rpx;">
			<view class="de_Size_module_1">
				<view class="de_line"></view>
				<view
					style="margin-left: 8rpx;width: 250rpx; text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
					{{$t('文件')}}</view>
			</view>
			<view v-for="(item,index) in detailData.buy_files" :key="indexd" @click="downLoadFile()"
				style="width: 100%;height: 62rpx;background-color: #EEEEEE;border-radius: 16rpx;margin-top: 20rpx;padding: 15rpx;">
				<view
					style="font-size: 24rpx;color: #028AFA;width: 400rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
					{{item}}</view>
			</view>
		</view>
		<!-- 文件可下载 v-if="detailData.buy_files.length > 0" -->
		<view v-if="detailData.buy_files.length > 0"
			style="width: 690rpx;min-height: 166rpx;display: flex;flex-direction: column;padding: 16rpx;background-color: #FFFFFF;border-radius: 16rpx;margin-top: 16rpx;">
			<view class="de_Size_module_1">
				<view class="de_line"></view>
				<view
					style="margin-left: 8rpx;width: 250rpx; text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
					{{$t('文件')}}</view>
			</view>
			<view v-for="(item,index) in detailData.buy_files" :key="indexd" @click="downLoadFile(item)"
				style="width: 100%;height: 62rpx;background-color: #EEEEEE;border-radius: 16rpx;margin-top: 20rpx;padding: 15rpx;">
				<view
					style="font-size: 24rpx;color: #028AFA;width: 400rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
					{{item}}</view>
			</view>
		</view>
		<!-- 采购清单 v-if="detailData.filelist" -->
		<view v-if="detailData.filelist"
			style="width: 690rpx;min-height: 166rpx;display: flex;flex-direction: column;padding: 16rpx;background-color: #FFFFFF;border-radius: 16rpx;margin-top: 16rpx;">
			<view class="de_Size_module_1">
				<view class="de_line"></view>
				<view
					style="margin-left: 8rpx;width: 250rpx; text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
					{{$t('采购清单')}}</view>
			</view>
			<view @click="downLoadFile_CG()"
				style="width: 100%;height: 62rpx;background-color: #EEEEEE;border-radius: 16rpx;margin-top: 20rpx;padding: 15rpx;">
				<view
					style="font-size: 24rpx;color: #028AFA;width: 400rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
					{{detailData.filelist}}</view>
			</view>
		</view>
		<!-- <view style="width: 690rpx;height: 93rpx;display: flex;justify-content: space-between;margin-top: 30rpx;margin-bottom: 30rpx;">
			<view class="mm1" @click.stop="handelePoa(1)">{{jb()}}</view>
			<view class="mm2" @click.stop="handelePoa(2)">{{$t('即时沟通')}}</view>
		</view> -->
		<view style="height: 120rpx;"></view>
		<view style="width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: space-between;padding: 11rpx 30rpx;background-color: #FFFFFF;margin-top: 60rpx;position: fixed;bottom: 0;z-index: 100;">
			<view @click="setGuan" style="width: 125rpx;display: flex;height: 42rpx;align-items: center;justify-content: space-between;">
				<image v-if="follow===1" style="width: 42rpx;height: 42rpx;" :src="HTTP_IMG_UTL+'guanzhu_@4x.png'" mode=""></image>
				<image v-if="follow===2" style="width: 42rpx;height: 42rpx;" :src="HTTP_IMG_UTL+'yiguanzhu@4x.png'" mode=""></image>
				<view :class="follow===1?'guanzhu1':'guanzhu2'">{{$t('关注')}}</view>
			</view>
			<view style="width: 484rpx;height: 78rpx;display: flex;justify-content: space-between;">
				<view class="pos_block1" @click.stop="handelePoa(1)">{{$t('参与订单')}}</view>
				<view class="pos_block2" @click.stop="handelePoa(2)">{{$t('即时沟通')}}</view>
			</view>
		</view>
		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />
	</view>
</template>

<script>
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app'
	
	import {
		ImageUrl,
		isVideo,
		time,
		createC2CConversation
	} from "@/common/public";
	export default {
		components: {
			vipPopup
		},
		data() {
			return {
				im:'https://gluz-oss.oss-cn-beijing.aliyuncs.com',
				HTTP_IMG_UTL,
				QIndex: 1,
				videoUrl: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com',
				QList: [
					'视频', '图片'
				],
				isShow: true, //控制显示图片还是视频
				isParameter: false,
				list: [], //轮播图
				lang: 'zh', //语言
				id: 0, // 商品id
				type: 1, // 1=推广，2=竞标
				releaseType: '',
				status: '',
				detailData: {}, //详情信息
				IMGURL: '',
				arr: [{
						image: 'https://app.gluz.com.cn/uniappAssets/banner-2.png'
					},
					{
						image: 'https://app.gluz.com.cn/uniappAssets/banner-4.png'
					},
					{
						image: 'https://app.gluz.com.cn/uniappAssets/banner-5.png'
					}
				],
				//后台开关验证 vip权限
				vip: false,
				vipShow: false,
				follow: 1
			}
		},
		onLoad(option) {
			this.IMGURL = IMAGE_URL
			this.releaseType = option.releaseType
			this.id = parseInt(option.id)
			this.type = parseInt(option.type)
			this.status = option.status
			this.lang = this.$i18n.locale
			this.getLang()
			this.getDetail()
			this.getGuan()
		},
		methods: {
			// 切换视频和图片的显示和隐藏
			// isShow  为真显示图片   假显示视频
			handeleQitem(index) {
				if (index === 1) {
					this.QIndex = 0
					this.isShow = true
				} else {
					this.QIndex = 1
					this.isShow = false
				}
			},
			fullscreenchange(event) {
				if (!event.detail.fullScreen) {
					this.videoContext.pause()
					this.videoContext.seek(0)
					this.show2 = false
					this.is_full = 0
				} else {
					this.is_full = 1
				}
			},
			// 点击关注
			setGuan() {
				let data = {
					guanzhu_id: this.id,
					lang: this.lang,
					release_type: "goods",
					type: this.type,
				}
				this.$u.api.user.tgGuanZhu(data).then(res => {
					if (this.follow == 1) {
						this.follow = 2
					} else {
						this.follow = 1
					}

				})
			},
			// 获取关注
			getGuan() {
				let data = {
					guanzhu_id: this.id,
					lang: this.lang,
					release_type: "goods",
					type: this.type,
				}
				this.$u.api.user.isGuanZhu(data).then(res => {
					console.log('res:', res);
					this.follow = res
				})
			},
			downLoadFile_CG() {
				const that = this
				uni.showLoading({
					title: "download...",
					mask: true
				})
				console.log('下载链接', this.IMGURL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMGURL + that.detailData.filelist,
					success(res) {
						uni.hideLoading()
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({
					progress,
					totalBytesWritten,
					totalBytesExpectedToWrite
				}) => {
					if (progress === 100) {
						downloadTask.offProgressUpdate();
					}
				})
			},
			downLoadFile(url) {
				const that = this
				uni.showLoading({
					title: "download...",
					mask: true
				})
				console.log('下载链接', this.IMGURL + url)
				var downloadTask = uni.downloadFile({
					url: that.IMGURL + url,
					success(res) {
						uni.hideLoading()
						const tempFilePath = res.tempFilePath
						uni.openDocument({
							filePath: tempFilePath,
							showMenu: true,
							success: function(file) {
								console.log('file-success', file);
							}
						});
					},
				})
				downloadTask.onProgressUpdate(({
					progress,
					totalBytesWritten,
					totalBytesExpectedToWrite
				}) => {
					if (progress === 100) {
						downloadTask.offProgressUpdate();
					}
				})
			},
			clickVipPopup() {
				this.vipShow = false //点击vip弹窗隐藏
			},
			setImage(IMAGE) {
				if (IMAGE.slice(-3) === 'png' || IMAGE.slice(-3) === 'jpg') {
					return this.IMGURL + IMAGE
				} else {
					return IMAGE
				}
			},
			// 跳转到商家主页
			handeleLogo() {
				uni.navigateTo({
					url: '/pages/user/homePage/homePage?id=' + this.detailData.user_id
				})
			},
			handelePoa(index, item) {
				if (index === 1) {
					// 先判断手机号，如果使自己手机号，自己不能和参与
					var mobile = uni.getStorageSync('mobile');

					if (mobile === this.detailData.user.mobile) {
						this.$u.toast(this.$t('不能参与自己'));
						return
					}
					this.$u.api.user.order_join_day_auth({
						lang: this.lang
					}).then(res => {
						if (res == 1) {
							//参与竞标
							uni.navigateTo({
								// url:'/pages/order/process/buildOrder'
								url: '/pages/order/process/buildOrder?release_id=' + this.detailData.id +
									'&type=' + 'goods'
							})
						} else {
							if (this.vip) {
								this.vipShow = true
								return
							} else {
								uni.showModal({
									content: this.$t('您的权限不足哦!请联系工作人员!'),
									showCancel: false,
									confirmText: this.$t('是'),
								})
								return false;
							}
							return
						}
					})
				} else {
					createC2CConversation(this.detailData.user.mobile, this)
				}
			},
			setStr(str) {
				// 以'-'分割字符串
				const parts = str.split(' - ');

				// 创建数组
				const result = parts.map(part => {
					const keyValuePairs = part.split(';');
					return keyValuePairs.map(pair => {
						const [key, value] = pair.split(',');
						return {
							key: key.trim(),
							value: value.trim()
						};
					});
				}).flat();

				// 输出结果

				return result
			},
			getDetail() {
				switch (this.releaseType) {
					case 'goods':
						this.$u.api.collection.getGoodsDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.list = [{
								image: this.IMGURL + res.logo
							}]
							// 把字符串转换成对象
							if (res.parameter) {
								this.detailData.parameter = this.setStr(res.parameter)
							}
							// 把字符串转换成对象
							if (res.parameter_ru) {
								this.detailData.parameter_ru = this.setStr(res.parameter_ru)
							}
							console.log('this.detailData:', this.detailData);
						})
						break;
				}
			},
			// 获取语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("详情页")
			})
		},
	}
</script>

<style lang="scss" scoped>
	.pos_block1 {
		width: 228rpx;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		background: linear-gradient(0deg, #000000, #000000), #D8D8D8;
		border-radius: 18rpx;
		color: #ffffff;
	}

	.pos_block2 {
		width: 228rpx;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		background: linear-gradient(109deg, #FF8C7B 14%, #FFD1A2 98%), #D8D8D8;
		border-radius: 18rpx;
		color: #FFFFFF;
	}

	.de_line {
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(102deg, #D9F0A3 0%, rgba(217, 240, 163, 0.411) 55%, rgba(201, 239, 49, 0) 100%);
	}

	.de_Size_module_1 {
		width: 50%;
		display: flex;
		align-items: flex-end;
		// background-color: red;
		font-size: 32rpx;
		font-weight: 600;
		// background-color: #D9F0A3;

	}

	.qitems_active {
		width: 180rpx;
		height: 54rpx;
		background-color: #999999;
		text-align: center;
		line-height: 54rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.qitems {
		width: 180rpx;
		height: 54rpx;
		background-color: #000;
		text-align: center;
		line-height: 54rpx;
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.guanzhu1 {
		font-size: 35rpx;
		width: 70rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.guanzhu2 {
		font-size: 35rpx;
		color: #DE4023;
		width: 70rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.trianglex {
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-top: 20rpx solid #D8D8D8;
	}

	.triangles {
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 20rpx solid #D8D8D8;
	}

	.mm1 {
		color: #ffffff;
		font-size: 28rpx;
		width: 326rpx;
		height: 93rpx;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.84);
	}

	.mm2 {
		color: #ffffff;
		width: 326rpx;
		height: 93rpx;
		border-radius: 16px;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(106deg, #FF8C7B 15%, #FFD1A2 99%), rgba(0, 0, 0, 0.84);
	}

	.ml1 {
		position: absolute;
		top: 100rpx;
		left: 85rpx;
		font-size: 18rpx;
		transform: rotate(47deg);
	}

	.mh2 {
		position: absolute;
		top: 110rpx;
		left: 185rpx;
		font-size: 18rpx;
		transform: rotate(-18deg);
	}

	.mw3 {
		position: absolute;
		top: 50rpx;
		left: 255rpx;
		font-size: 18rpx;
	}

	.de_tedail3 {
		width: 594rpx;
		height: 119rpx;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.de_tedail2 {
		width: 634rpx;
		height: 159rpx;
		border-radius: 16rpx;
		margin-left: 16rpx;
		margin-top: 20rpx;
		background: #F5F4F9;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.de_tedail1 {
		width: calc(100% - 60rpx);
		min-height: 605rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}



	.pos_block_view {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.pos_block {
		width: 50%;
		height: 78rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
	}

	.container_zh {
		// background-color: blue;
		text-align: center;
		font-size: 24rpx;
		width: 100rpx;
		overflow-wrap: break-word;
		/* or word-wrap: break-word; */
		white-space: normal;
		/* default value, but included for clarity */
	}

	.container_ru {
		line-height: 1;
		height: 70rpx;
		margin-top: 16rpx;
		text-align: center;
		font-size: 15rpx;
		width: 100rpx;
		overflow-wrap: break-word;
		/* or word-wrap: break-word; */
		white-space: normal;
		/* default value, but included for clarity */
	}

	.googs_images {
		width: 600rpx;
		height: 48rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		margin-left: 10rpx;
	}

	.de_detail_images_title {
		width: calc(100% - 40rpx);
		height: 48rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 32rpx;
		font-weight: 600;
	}

	.de_detail_images_1 {
		width: 612rpx;
		min-height: 500rpx;
		display: flex;
		flex-direction: column;

	}

	.de_detail_images {
		width: calc(100% - 56rpx);
		min-height: 700rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.de_detail_title_2 {
		width: 100%;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.de_detail_title_1 {
		width: 100%;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #D8D8D8;
		font-size: 24rpx;
	}

	.de_detail_title_new {
		// position: absolute;
		// background-color: red;
		width: 650rpx;
		height: 650rpx;
		// top: 0;
		// left: 0;
		display: flex;
		flex-direction: column;
		// padding: 25rpx 42rpx 4rpx 36rpx;
	}

	.de_detail_title {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding: 25rpx 42rpx 4rpx 36rpx;
	}

	.de_detail {
		width: calc(100% - 56rpx);
		height: 342rpx;
		position: relative;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}

	.de_detail_1 {
		width: calc(100% - 56rpx);
		min-height: 670rpx;
		position: relative;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.de_Size_module_3 {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		margin-top: 18rpx;
		margin-left: 16rpx;
	}

	.de_Size_module_2 {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		margin-top: 18rpx;
		margin-left: 16rpx;
	}

	.de_Size_module_1 {
		width: 50%;
		display: flex;
		align-items: flex-end;
		// background-color: red;
		font-size: 32rpx;
		font-weight: 600;
		// background-color: #D9F0A3;

	}

	.de_line {
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(102deg, #D9F0A3 0%, rgba(217, 240, 163, 0.411) 55%, rgba(201, 239, 49, 0) 100%);
	}

	.de_Size_module {
		width: calc(100% - 60rpx);
		height: 172rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 36rpx 30rpx 20rpx;
		display: flex;
		// flex-direction: column;

	}

	.de_Comprehensive_title {
		position: absolute;
		left: 0;
		top: 0;
		width: 392rpx;
		height: 44rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.de_Comprehensive_evaluation {
		width: 400rpx;
		height: 58rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.de_evaluate_block_left {
		width: 80rpx;
		height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.de_evaluate_block {
		height: 58rpx;
		width: 100%;
		margin-top: 14rpx;
		display: flex;
		justify-content: space-between;
	}

	.de_evaluate_title {
		width: 540rpx;
		height: 41rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		font-size: 32rpx;
		margin-top: 12rpx;
		margin-left: 4rpx;
	}

	.de_evaluate {
		width: 570rpx;
		height: 100%;
	}

	.de_logo {
		width: 120rpx;
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.de_size {
		width: calc(100% - 60rpx);
		height: 124rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		display: flex;

	}

	.de_title_block_but_tow {
		font-size: 28rpx;
		width: 113rpx;
		min-height: 85rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.de_title_block_but_one {
		font-size: 28rpx;
		width: 113rpx;
		min-height: 85rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.de_title_block_but {
		width: calc(100% - 112rpx);
		height: 85rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;
		margin-left: 56rpx;
	}

	.de_title_block_title {
		width: 590rpx;
		height: 80rpx;
		font-size: 32rpx;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-weight: 700;
		margin-top: 20rpx;
	}

	.de_title_block {
		width: calc(100% - 60rpx);
		min-height: 210rpx;
		// background-color: red;
	}

	.de_title {
		width: 100%;
		min-height: 270rpx;
		border-radius: 28rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.de_swiper {
		width: 100%;
		height: 748rpx;
		background-color: #FFFFFF;
	}

	.de_cantent {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
<style>
	page {
		background: #F6F6F6;
	}
</style>